<template>
  <div id="app" style="height:100%;">
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <loading v-model="isLoading"></loading>
    <view-box>
      <!--<Yq-header :needBack="needBack" :needLeft="needLeft" :needRight="needRight" :needRight2="needRight2"-->
                 <!--:rightCallback="rightCallback" slot="header" :leftCallback="leftCallback"-->
                 <!--v-if="isShowHeader" ref="header">-->
        <!--<p slot="content">{{title}}</p>-->
        <!--<p slot="leftContent" v-if="needLeft">{{leftContent}}</p>-->
        <!--<div slot="rightContent" v-if="needRight">{{rightContent}}</div>-->
        <!--<img slot="rightContent2" v-if="needRight2" src="../src/assets/images/shopMall/icon_ss_nor.png" height="20px" width="20px"/>-->
      <!--</Yq-header>-->
      <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
        <router-view name="main" class="router-view"></router-view>
      </transition>
      <tabbar slot="bottom" class="vux-demo-tabbar" icon-class="vux-center" v-show="isShowTabbar" v-model="index">
        <tabbar-item @click.native="activitiesfn" :show-dot=hasSign>
          <img slot="icon" src="../src/assets/images/appTab/icon_hd_normal@2x.png" v-if="isSel1 === false">
          <img slot="icon" src="../src/assets/images/appTab/icon_hd_sel@2x.png" v-if="isSel1 === true">
          <span slot="label">活动</span>
        </tabbar-item>
        <tabbar-item :show-dot="false" @click.native="test">
          <img slot="icon" src="../src/assets/images/appTab/icon_sc_normal@2x.png" v-if="isSel2 === false">
          <img slot="icon" src="../src/assets/images/appTab/icon_sel@2x.png" v-if="isSel2 === true">
          <span style="vertical-align: super">1</span>
          <span slot="label">商城</span>
          <span style="vertical-align: super">123</span>
        </tabbar-item>
        <tabbar-item @click.native="shopCartfn" :badge="shopCarNum">
          <img slot="icon" src="../src/assets/images/appTab/icon_gwc_normal@2x.png" v-if="isSel3 === false">
          <img slot="icon" src="../src/assets/images/appTab/icon_gwc_sel@2x.png" v-if="isSel3 === true">
          <span slot="label">购物车</span>
        </tabbar-item>
        <tabbar-item badge="" @click.native="userfn">
          <img slot="icon" src="../src/assets/images/appTab/icon_mine_normal@2x.png" v-if="isSel4 === false">
          <img slot="icon" src="../src/assets/images/appTab/icon_mine_sel@2x.png"  v-if="isSel4 === true">
          <span slot="label">个人中心</span>
        </tabbar-item>
      </tabbar>
    </view-box>
  </div>
</template>

<script>
  import { Loading, ViewBox, Tabbar, TabbarItem, Alert, Badge } from 'vux'
//  import YqHeader from './components/YqHeader.vue'
  import { mapState } from 'vuex'
  import * as types from './store/types'
  import $ from 'jquery'
  import {API_ROOT} from './config.js'
  import * as urls from './api/urls'

  export default {
    components: {
      Loading,
      ViewBox,
      Tabbar,
      TabbarItem,
//      YqHeader,
      Alert,
      Badge
    },
    computed: mapState({
      isLoading () {
        return this.$store.state.state.isLoading
      },
      rightCallback () {
        return this.$store.state.state.rightCallback
      },
      leftCallback () {
        return this.$store.state.state.leftCallback
      },
      needBack () {
        return this.$store.state.state.needBack
      },
      needRight () {
        return this.$store.state.state.needRight
      },
      needRight2 () {
        return this.$store.state.state.needRight2
      },
      needLeft () {
        return this.$store.state.state.needLeft
      },
      isShowHeader () {
        if (this.header !== '') {
          this.$store.commit(types.STATE_SET_SHOWHEADER, this.header)
          return this.header
        } else {
          return this.$store.state.state.isShowHeader
        }
      },
      rightContent () {
        return this.$store.state.state.rightContent
      },
      leftContent () {
        return this.$store.state.state.leftContent
      },
      title () {
        return this.$store.state.state.title
      },
      isShowTabbar () {
        return this.$store.state.state.isShowTabbar
      }
    }),
    mounted: function () {
      console.log('微信Js-SDk权限接口列表this.$wechat', this.$wechat)
      if (this.$store.state.userInfo.id === '' || this.$store.state.userInfo.id === null || this.$store.state.userInfo.id === undefined) {
        if (this.userId !== '' && this.userId !== null && this.userId !== undefined) {
          let userId = window.location.href.replace(/.*userId=(\w*)&?.*/, '$1')
          this.userId = userId
          this.$store.commit(types.USER_INFO, {id: userId})
          let url = window.location.origin
          this.$store.commit(types.EMPOWER, url)
//      this.validate()
          this.weixinfn()
          this.QQnumberFn()
          this.setSel() // 设置活动图标
          this.getLogo() // 获取LOGO
          this.setShopCarNum() // 获取购物车数量以及是否签到
        } else {
          let url = window.location.origin
          window.location.href = url + '/api/wxAuth/index?type=t1'
        }
      } else {
        this.userId = this.$store.state.userInfo.id
        let url = window.location.origin
        this.$store.commit(types.EMPOWER, url)
//      this.validate()
        this.weixinfn()
        this.QQnumberFn()
        this.setSel() // 设置活动图标
        this.getLogo() // 获取LOGO
        this.setShopCarNum() // 获取购物车数量以及是否签到
      }
      let that = this
//      this.setHeader()
      this.$router.beforeEach(function (to, from, next) {
        if (from.path === '/content/shoppingMall/ShoppingMall' || from.path === '/content/shoppingCar/ShoppingCar' || from.path === '/order/OrderIndex' || from.path === '/ShopInfo' || from.path === '/ScoreShop' || from.path === '/UserWallet') {
          document.getElementsByClassName('weui_tab_bd')[0].style.overflowY = 'auto'
        }
        if (from.path === '/ScoreShop' || from.path === '/ShopInfo' || from.path === '/UserInformation' || from.path === '/order/OrderIndex' || from.path === '/UserInvitation' || from.path === '/pionts/PiontsIndex' || from.path === '/remainder/RemainderIndex' || from.path === '/order/RefundInfo' || from.path === '/order/OrderDetail' || from.path === '/UserShare') {
          document.getElementsByClassName('weui_tabbar')[0].style.display = 'flex'
          document.getElementsByClassName('weui_tab_bd')[0].style.overflowY = 'auto'
          document.getElementsByClassName('weui_tab_bd')[0].style.paddingBottom = '55px'
        }
        next()
      })
      this.$router.afterEach(function (to) {
        that.$store.commit(types.STATE_SET_LOADING, false)
      })
    },
    watch: {
      isShowTabbar: function (val) {
        if (!val) { // 当不显示tabbar时，取消paddingBottom样式
          document.getElementsByClassName('weui_tab_bd')[0].style.paddingBottom = '0'
        } else {
          document.getElementsByClassName('weui_tab_bd')[0].style.paddingBottom = '55px'
        }
      },
      header: function (val) {
        if (val.isShowHeader !== '') {
          this.isShowHeader = val.isShowHeader
        }
      }
    },
    data () {
      return {
        index: 1,
        shopCarNum: '',
        hasSign: false,
        alertShow: {
          showmsg: false,
          msg: ''
        },
        direction: 'forward',
        isSel1: false,
        isSel2: true,
        isSel3: false,
        isSel4: false,
        header: ''
      }
    },
    methods: {
      setShopCarNum () {
        let userId = this.$store.state.userInfo.id
        let that = this
        this.$nextTick(function () {
          that.http(urls.cartAndSign, {userId: userId}, function (res) {
            if (res.status === 100) {
              console.log(res.data)
              if (res.data.cartCount !== 0) {
                that.shopCarNum = res.data.cartCount.toString()
              } else {
                that.shopCarNum = ''
              }
              if (res.data.hasSign === true) {
                that.hasSign = false
              } else {
                that.hasSign = true
              }
            } else {
              that.alertShow.showmsg = true
              that.alertShow.msg = res.errMsg
            }
          }, function (res) {
            that.alertShow.showmsg = true
            that.alertShow.msg = res
          })
        })
      },
      setSel () {
        let sel1 = window.location.href.indexOf('Activities')
        let sel2 = window.location.href.indexOf('ShoppingMall')
        let sel3 = window.location.href.indexOf('ShoppingCar')
        let sel4 = window.location.href.indexOf('User')
        let sel5 = window.location.href.indexOf('UserWallet')
        if (sel1 !== -1) {
          this.index = 0
          this.isSel1 = true
          this.isSel2 = false
          this.isSel3 = false
          this.isSel4 = false
        }
        if (sel2 !== -1) {
          this.index = 1
          this.isSel1 = false
          this.isSel2 = true
          this.isSel3 = false
          this.isSel4 = false
        }
        if (sel3 !== -1) {
          this.index = 2
          this.isSel1 = false
          this.isSel2 = false
          this.isSel3 = true
          this.isSel4 = false
        }
        if (sel4 !== -1 || sel5 !== -1) {
          this.index = 3
          this.isSel1 = false
          this.isSel2 = false
          this.isSel3 = false
          this.isSel4 = true
        }
      },
      getQueryString (name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
        var r = window.location.search.substr(1).match(reg)
        if (r !== null) {
          return (r[2])
        } else {
          return null
        }
      },
      setHeader () {
        let params = window.location.href.substr('params='.length + window.location.href.indexOf('?') + 1, window.location.href.length)
        let obj = JSON.parse(unescape(params))
        if (obj.isShowHeader === undefined || obj.isShowHeader === '') {
          this.header = ''
        } else {
          this.header = obj.isShowHeader
        }
      },
      QQnumberFn () {
        let that = this
        this.http(urls.sysqq, {}, function (res) {
          if (res.status === 100) {
            if (res.data.data !== null) {
              that.$store.commit(types.EMPOWER, {sysqq: res.data.data})
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
//      validate () {
//        document.getElementById('emPower').submit()
//        $.ajax({
//          url: 'http://tony16.imwork.net/api/wxAuth/index?type=t1',
//          type: 'get',
//          emPowerSuccess: function (t) {
//            if (t.status === 100) {
//              console.log(t)
//            }
//          },
//          error: function (t) {
//          }
//        })
//      },
      weixinfn () {
        let that = this
        let url = window.location.href.split('#')[0]
        $.ajax({
          url: API_ROOT + '/api/wxAuth/jsauth?url=' + encodeURIComponent(url),
          type: 'get',
          success: function (t) {
            if (t.status === 100) {
              let sign = t.data.sign
              that.$wechat.config({
                debug: false,
                appId: sign.appId,
                timestamp: sign.timeStamp,
                nonceStr: sign.nonceStr,
                signature: sign.signature,
                jsApiList: ['showMenuItems', 'onMenuShareAppMessage', 'chooseWXPay', 'onMenuShareTimeline']
              })
            }
          },
          error: function (t) {
          }
        })
      },
      activitiesfn () {
        this.index = 0
        this.isSel1 = true
        this.isSel2 = false
        this.isSel3 = false
        this.isSel4 = false
        this.$router.push({
          path: '/content/activities/Activities'
        })
        this.$router.go(1)
      },
      test () {
        // let img = '<img src="assets/images/shopMall/icon_ss_nor.png" height="20px" width="20px"/>'
        this.index = 1
        this.isSel1 = false
        this.isSel2 = true
        this.isSel3 = false
        this.isSel4 = false
        this.$router.push({
          path: '/content/shoppingMall/ShoppingMall'
        })
        this.$router.go(1)
      },
      shopCartfn () {
        this.index = 2
        this.isSel1 = false
        this.isSel2 = false
        this.isSel3 = true
        this.isSel4 = false
        this.$router.push({
          path: '/content/shoppingCar/ShoppingCar'
        })
        this.$router.go(1)
      },
      userfn () {
        this.index = 3
        this.isSel1 = false
        this.isSel2 = false
        this.isSel3 = false
        this.isSel4 = true
        this.$router.push({
          path: '/content/user/User'
        })
        this.$router.go(1)
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      },
      getLogo () {
        // 获取logo
        let that = this
        this.http(urls.getLogo, {}, function (res) {
          if (res.status === 100) {
            if (res.data !== null) {
              that.$store.commit(types.EMPOWER, {logo: res.data.logo})
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      }
    }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';

  body {
    background-color: #fbf9fe;
  }
  html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  .demo-icon-22 {
    font-family: 'vux-demo';
    font-size: 22px;
    color: #888;
  }
  .weui_tabbar.vux-demo-tabbar {
    /** backdrop-filter: blur(10px);
    background-color: none;
    background: rgba(247, 247, 250, 0.5);**/
  }
  .vux-demo-tabbar .weui_bar_item_on .demo-icon-22 {
    color: #F70968;
  }
  .vux-demo-tabbar .weui_tabbar_item.weui_bar_item_on .weui_tabbar_label {
    color: #2f3437;
  }
  .vux-demo-tabbar .weui_tabbar_item.weui_bar_item_on .vux-demo-tabbar-icon-home {
    color: rgb(53, 73, 94);
  }
  .demo-icon-22:before {
    content: attr(icon);
  }
  .vux-demo-tabbar-component {
    background-color: #F70968;
    color: #fff;
    border-radius: 7px;
    padding: 0 4px;
    line-height: 14px;
  }
  .weui_dialog_confirm .weui_dialog .weui_dialog_bd {
    text-align: center !important;
  }
  .weui_tabbar_icon + .weui_tabbar_label {
    margin-top: 0!important;
  }
  .vux-demo-header-box {
    z-index: 100;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
  }
  @font-face {
    font-family: 'vux-demo';  /* project id 70323 */
    src: url('//at.alicdn.com/t/font_mh11prdwhirx80k9.eot');
    src: url('//at.alicdn.com/t/font_mh11prdwhirx80k9.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_mh11prdwhirx80k9.woff') format('woff'),
    url('//at.alicdn.com/t/font_mh11prdwhirx80k9.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_mh11prdwhirx80k9.svg#iconfont') format('svg');
  }
  .demo-icon {
    font-family: 'vux-demo';
    font-size:20px;
    color: #3d82e5;
  }
  .weui_tabbar_icon{
    width: 20px !important;
    height: 20px !important;
  }
  .demo-icon:before {
    content: attr(icon);
  }
  /**
  * vue-router transition
  */
  .router-view {
    width: 100%;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    backface-visibility: hidden;
  }
  .vux-pop-out-enter-active,
  .vux-pop-out-leave-active,
  .vux-pop-in-enter-active,
  .vux-pop-in-leave-active {
    will-change: transform;
    height: 100%;
    position: absolute;
    left: 0;
  }
  .vux-pop-out-enter-active {
    animation-name: popInLeft;
  }
  .vux-pop-out-leave-active {
    animation-name: popOutRight;
  }
  .vux-pop-in-enter-active {
    perspective: 1000;
    animation-name: popInRight;
  }
  .vux-pop-in-leave-active {
    animation-name: popOutLeft;
  }
  @keyframes popInLeft {
    from {
      transform: translate3d(-100%, 0, 0);
    }
    to {
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes popOutLeft {
    from {
      opacity: 1;
    }
    to {
      transform: translate3d(-100%, 0, 0);
    }
  }
  @keyframes popInRight {
    from {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes popOutRight {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
  }
  .weui_cell_bd > p{
    color: #636363 !important;
    font-size: 13px;
  }
  .weui_cell_ft{
    font-size: 13px;
  }
  .weui_dialog_ft{
    font-size: 14px !important;
  }
  .weui_label{
    font-size: 14px;
    color: #636363 !important;
  }
  .vux-tab-ink-bar{
    background-color: #3d82e5 !important;
  }
  .weui_input{
    font-size: 14px !important;
  }
  .weui_dialog_title{
    color: #f95320 !important;
  }
  .weui_btn_dialog.primary{
    color: #3d82e5 !important;
  }
  .weui_dialog_bd{
    color: #636363 !important;
  }
  .weui_textarea{
    font-size: 13px !important;
  }
  .vux-divider{
    color: #3d82e5 !important;
    font-size: 15px;
  }
  .vux-divider:after, .vux-divider:before{
    /*background-image: url("../src/assets/blueLine.png") !important;*/
    /*background-image: url("../src/assets/images/user/baise.png") !important;*/
  }
  .weui_cell:before{
    left: 0 !important;
  }
  .weui_cell_ft.with_arrow:after{
    border-width:1px 1px 0 0 !important;
  }
  .weui_search_cancel{
    color: #3d82e5 !important;
    /*font-size: 14px;*/
  }
  .vux-header{
    height: 38px !important;
  }
  .vux-header .vux-header-left, .vux-header .vux-header-right{
    top: 9px !important;
    line-height: 21px !important;
  }
  .vux-header .vux-header-title, .vux-header h1{
    line-height: 30px !important;
  }
  .vux-button-group > a:first-child{
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  .vux-button-group > a:last-child{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .vux-button-group > a.vux-button-group-current, .vux-button-group > a.hover, .vux-button-group > a:active{
    border-color: #3d82e5 !important;
    background: #3d82e5 !important;
  }
  .weui_tabbar_label{
    /*color: #909090 !important;*/
    /*font-size: 14px !important;*/
  }
  .vux-slider > .vux-indicator > a > .vux-icon-dot.active, .vux-slider .vux-indicator-right > a > .vux-icon-dot.active{
    background-color: #3d82e5 !important;
  }
  .vux-slider > .vux-indicator > a > .vux-icon-dot, .vux-slider .vux-indicator-right > a > .vux-icon-dot{
    width: 16px !important;
    height: 3px !important;
    border-radius: 0 !important;
  }
</style>
